<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="个人信息" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view class="coreshop-bg-white coreshop-solid-top coreshop-padding-left-40 coreshop-padding-right-40 coreshop-padding-top-20 coreshop-padding-bottom-20 coreshop-margin-bottom-10">
            <view class="coreshop-text-center coreshop-margin-bottom-10">
                <text class="coreshop-text-black">加油</text>
                <text class="coreshop-text-orange coreshop-font-40">{{percentage}}%</text>
                <text class="coreshop-text-black">，太棒啦！</text>
            </view>
            <u-line-progress :percentage="percentage" activeColor="#5FB878"></u-line-progress>
        </view>
        <view class="coreshop-list menu coreshop-bg-white coreshop-padding-15">
            <u--form :model="model" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
                <u-form-item label="头像：" borderBottom>
                    <u-avatar :src="model.avatar" @click="uploadAvatar" size="60" shape="square"></u-avatar>
                </u-form-item>
                <u-form-item label="昵称：" prop="nickname" borderBottom>
                    <u--input border="none" v-model="model.nickname" />
                </u-form-item>
                <u-form-item label="性别：" prop="sex" borderBottom @click="actionSheetShow = true">
                    <u--input border="none" type="select" v-model="model.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"></u--input>
                    <u-button slot="right" type="success" size="mini" @click="actionSheetShow = true">选择性别</u-button>
                </u-form-item>
                <u-form-item label="生日：" prop="birthday" borderBottom>
                    <u--input border="none" v-model="model.birthday" />
                    <u-datetime-picker ref="datetimePicker" v-model="birthdayTemporary" :show="show" :formatter="formatter" :minDate="-639129600000" :maxDate="1638725469000" mode="date" @confirm="bindDateChange" @cancel="show = false"></u-datetime-picker>
                    <u-button slot="right" type="success" size="mini" @click="show = true">选择日期</u-button>
                </u-form-item>
            </u--form>
        </view>
        <!--按钮-->
        <view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
            <u-button type="error" size="normal" @click="submitHandler()" :disabled='submitStatus' :loading='submitStatus'>保存</u-button>
        </view>
        <u-action-sheet :actions="actionSheetList" :show="actionSheetShow" @close="actionSheetShow = false" @select="actionSheetCallback"></u-action-sheet>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                model: {
                    birthday: '',
                    nickname: '',
                    sex: '',
                    sexIndex: 0,
                    avatar: '',
                    mobile: '',
                },
                birthdayTemporary: '',
                showCalendar: false,
                show: false,
                calendarMode: 'date',
                actionSheetShow: false,
                actionSheetList: [
                    {
                        name: '男'
                    },
                    {
                        name: '女'
                    },
                    {
                        name: '保密'
                    }
                ],
                rules: {
                    nickname: [
                        {
                            required: true,
                            message: '请输入昵称',
                            trigger: 'blur',
                        },
                        {
                            min: 2,
                            max: 16,
                            message: '昵称长度在2到16个长度',
                            trigger: ['change', 'blur'],
                        },
                        //{
                        //    validator: (rule, value, callback) => {
                        //        return this.$u.test.chinese(value);
                        //    },
                        //    message: '昵称必须为中文',
                        //    trigger: ['change', 'blur'],
                        //}
                    ],
                    sex: [
                        {
                            required: true,
                            message: '请选择性别',
                            trigger: 'change'
                        },
                    ],
                    birthday: [
                        {
                            required: true,
                            message: '请选择生日',
                            trigger: 'blur',
                        }
                    ],
                },
                index: 2,
                submitStatus: false,
                percentage: 0,

            }
        },
        // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
        onReady() {
            this.$refs.uForm.setRules(this.rules);
            // 微信小程序需要用此写法
            this.$refs.datetimePicker.setFormatter(this.formatter)
        },
        methods: {
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                return value
            },
            //生日
            bindDateChange: function (e) {
                var time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
                this.model.birthday = time;
                this.show = false;
            },
            // 点击actionSheet回调
            actionSheetCallback(e) {
                var _this = this;
                uni.hideKeyboard();
                for (var i = 0; i < this.actionSheetList.length; i++) {
                    if (e.name == this.actionSheetList[i].name) {
                        _this.model.sexIndex = i;
                    }
                }
                this.model.sex = e.name
                this.$refs.uForm.validateField('model.sexIndex')
            },
            // 用户上传头像
            uploadAvatar() {
                var _this = this;
                this.$upload.uploadFiles(null, res => {
                    if (res.status) {
                        // 上传成功的图片地址
                        let avatar = res.data.src;
                        // 执行头像修改
                        _this.$u.api.changeAvatar({
                            id: avatar
                        }).then(res => {
                            if (res.status) {
                                _this.$refs.uToast.show({
                                    message: '上传成功', type: 'success', complete: function () {
                                        _this.model.avatar = res.data
                                    }
                                })
                            } else {
                                _this.$u.toast(res.msg)
                            }
                        })
                    } else {
                        _this.$u.toast(res.msg)
                    }
                })
            },
            // 保存资料
            submitHandler() {
                this.submitStatus = true;
                if (!!!this.model.birthday) {
                    this.$refs.uToast.show({ message: '请选择出生日期', type: 'error' })
                    this.submitStatus = false;
                    return false;
                }
                this.$refs.uForm.validate().then(res => {
                    let sex = parseInt(this.model.sexIndex) + 1;
                    this.$u.api.editInfo({
                        sex: sex,
                        birthday: this.model.birthday,
                        nickname: this.model.nickname
                    }).then(res => {
                        this.submitStatus = false;
                        this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
                    });
                }).catch(errors => {
                    this.$refs.uToast.show({ message: '提交的数据校验失败，请输入合法信息！', type: 'error' })
                    this.submitStatus = false;
                })
            }
        },
        onLoad: function () {
            var _this = this;
            _this.$u.api.userInfo().then(res => {
                if (res.status) {
                    if (res.data.birthday) {
                        _this.model.birthday = uni.$u.timeFormat(res.data.birthday, 'yyyy-mm-dd');
                    }
                    _this.birthdayTemporary = _this.model.birthday;
                    _this.model.nickname = res.data.nickName;
                    _this.model.mobile = res.data.mobile;

                    if (res.data.birthday) {
                        _this.percentage += 25;
                    }
                    if (res.data.nickName) {
                        _this.percentage += 25;
                    }
                    if (res.data.mobile) {
                        _this.percentage += 25;
                    }
                    if (res.data.avatarImage) {
                        _this.percentage += 25;
                    }

                    if (res.data.sex && res.data.sex == 0) {
                        _this.model.sex = _this.actionSheetList[2].name;
                    } else {
                        _this.model.sex = _this.actionSheetList[res.data.sex - 1].name;
                    }
                    _this.model.avatar = res.data.avatarImage;
                } else {
                    //报错了
                    _this.$u.toast(res.msg);
                }
            });
        }
    }
</script>

<style scoped lang="scss">
</style>
